<template>
  <el-table 
   style="width: 100%"
  :data="props.tableData"  
  :border="props.border" 
  :max-height="props.maxHeight"
  :empty-text="props.empytText"
  :header-cell-style="props.headerCellStyle">
    <template v-for="(tableProp,index) in props.tablePropsFormat" :key="index">
        <el-table-column  v-if="!tableProp.emit"
            :key="tableProp.prop"
            :prop="tableProp.prop"
            :label="tableProp.label"
            :width="tableProp.width"
            :fixed="tableProp.fixed"
            :align="tableProp.align"
        />
        <el-table-column  v-else :label="tableProp.label" :width="tableProp.width" :fixed="tableProp.fixed" :align="tableProp.align">
            <template #default="scope">
                <template v-for="operate in tableProp.operates" :key="operate.operate">
                    <el-text v-if="operate.isText" 
                        :size="operate.size" 
                        :type="operate.type" 
                        :color="operate.color"
                        @click="handleEmit(scope,operate.emitType)">
                        {{operate.operate}}
                    </el-text>
                    <el-button v-else 
                        :size="operate.size" 
                        :type="operate.type"
                        :color="operate.color" 
                        @click="handleEmit(scope,operate.emitType)">
                        {{operate.operate}}
                        
                    </el-button>
                </template>
            </template>
        </el-table-column>
    </template>
  </el-table>
</template>

<script setup>
import { ref } from "vue"

const props=defineProps({
    'tableData':{default:{}},
    'tablePropsFormat':{default:[]},
    'border':{default:false},
    'maxHeight':{default:500},
    'headerCellStyle':{default:{}},
    'emptyText':{default:'暂无数据'},
    
})
// 获取传递过来的所有emits
var emitsTypes=[]
props.tablePropsFormat.forEach(tableProp=>{
    if(tableProp.slot){
        tableProp.operates.forEach(operate=>{
            emitsTypes.push(operate.emitType)
        })
    }
})
// 通过emit将事件传递出去
const emit=defineEmits()
const handleEmit=({row},emitType)=>{
    emit(emitType,row)
}

</script>

<style lang="scss" scoped>

</style>